<!--
float与文字
    1）float的初衷是让文字环绕浮动元素
    2）容器中，同时存在一张图片、一堆文字时，只需要给图片设置浮动，文字就能实现环绕。
    3）注意：文字是纯英文时不能实现；文字过多时需要overflow，否则掉落下去。
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 400px;
        height: 150px;
        margin: 100px auto;
        padding: 15px;
        background-color: cyan;
    }
    .pic {
        float: left;
        margin-right: 5px;
    }
    .pic img {
        height: 100%;
    }
    .box p {
        overflow: hidden;
        height: 100%;
        text-indent: 2em;
        /* background-color: red; */
    }
</style>

<div class="box">
    <div class="pic">
        <img src="./resources/pictures/item.png" alt="">
    </div>
    <p>我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦
        我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦
        我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦我是一堆文字哦</p>
</div>